
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="/static/component/pear/css/pear.css" />
</head>
<body class="pear-container">
<div class="layui-card">
    <div class="layui-card-body">
        <table id="dataTable" lay-filter="dataTable"></table>
    </div>
</div>

<script type="text/html" id="power-enable">
    <input type="checkbox" lay-skin="switch" value="{{d.id}}" lay-text="已部署|未部署" lay-filter="deploy-enable" {{ d.status == 2 ? 'checked' : '' }}>
</script>

<script type="text/html" id="options">
    <a href="javascript:;" style="color:#1890ff" lay-event="edit"><i class="layui-icon layui-icon-edit"></i> 编辑</a> |
    {{# if (d.status == 1){ }}
    <a href="javascript:;" style="color:#1890ff" lay-event="design"><i class="layui-icon layui-icon-set"></i> 设计</a> |
    {{# } }}
    <a href="javascript:;" style="color:#1890ff" lay-event="conf"><i class="layui-icon layui-icon-app"></i> 设置</a> {{# if (d.status == 1){ }}|
    <a href="javascript:;" style="color:#1890ff" lay-event="del"><i class="layui-icon layui-icon-delete"></i> 删除</a>
    {{# } }}
</script>

<script type="text/html" id="toolbar">
    <button class="pear-btn pear-btn-success pear-btn-md" lay-event="add">
        <i class="layui-icon layui-icon-add-1"></i>
        新增
    </button>
</script>

<script src="/static/component/layui/layui.js"></script>
<script src="/static/component/pear/pear.js"></script>
<script>
    layui.use(['table', 'form', 'jquery','common'], function() {
        let table = layui.table;
        let form = layui.form;
        let $ = layui.jquery;
        let common = layui.common;

        let MODULE_PATH = "{$Request.root}/form/";

        let cols = [
            [{
                field: 'id',
                title: 'ID',
                unresize: true,
                align: 'center',
                width: 80
            },{
                field: 'title',
                title: '名称',
                unresize: true,
                align: 'center'
            },{
                field: 'table',
                title: '表名',
                unresize: true,
                align: 'center'
            },{
                field: 'now_version',
                title: '当前版本',
                unresize: true,
                align: 'center',
                width: 100
            },{
                field: 'deploy_version',
                title: '部署版本',
                unresize: true,
                align: 'center',
                width: 100
            },{
                field: 'status',
                title: '状态',
                unresize: true,
                align: 'center',
                templet:'#power-enable'
            }, {
                field: 'create_time',
                title: '创建时间',
                align: 'center',
                unresize: true,
            },
            {
                title: '操作',
                toolbar: '#options',
                unresize: true,
                align: 'center',
            }]
        ]

        table.render({
            elem: '#dataTable',
            url: MODULE_PATH + 'index',
            page: true,
            cols: cols,
            cellMinWidth: 100,
            skin: 'line',
            toolbar: '#toolbar',
            defaultToolbar: [{
                title: '刷新',
                layEvent: 'refresh',
                icon: 'layui-icon-refresh',
            }, 'filter', 'print', 'exports']
        });

        table.on('tool(dataTable)', function(obj) {
            if (obj.event === 'design') {
                window.design(obj);
            } else if (obj.event === 'edit') {
                window.edit(obj);
            } else if (obj.event === 'conf') {
                window.conf(obj);
            } else if (obj.event === 'del') {
                window.del(obj);
            }
        });

        table.on('toolbar(dataTable)', function(obj) {
            if ((obj.event === 'add') ) {
                window.add();
            } else if (obj.event === 'refresh') {
                window.refresh();
            }
        });

        function screen() {
            if (typeof width !== 'number' || width === 0) {
                width = $(window).width() * 0.9;
            }
            if (typeof height !== 'number' || height === 0) {
                height = $(window).height() - 20;
            }
            return [width + 'px', height + 'px'];
        }

        window.add = function() {
            layer.open({
                type: 2,
                maxmin: true,
                title: '新增表单',
                shade: 0.1,
                area: ['600px', '300px'],
                content: MODULE_PATH + 'add'
            });
        }

        window.edit = function(obj) {
            layer.open({
                type: 2,
                maxmin: true,
                title: '编辑表单',
                shade: 0.1,
                area: ['600px', '300px'],
                content: MODULE_PATH + 'edit/id/'+obj.data['id']
            });
        }

        window.conf = function(obj) {
            layer.open({
                type: 2,
                maxmin: true,
                title: '配置表单',
                shade: 0.1,
                area: screen(),
                content: '{$Request.root}/Crud/conf/id/'+obj.data['id']
            });
        }

        window.del = function(obj) {
            layer.confirm('确定要删除吗？', {
                title: '友情提示',
                icon: 3,
                btn: ['确定', '取消']
            }, function(){
                $.post('/form/del', {id: obj.data['id']}, function (res) {
                    if (res.code == 0) {
                        layer.msg(res.msg);
                        setTimeout(function () {
                            table.reload('dataTable');
                        }, 1000);
                    } else {
                        layer.msg(res.msg);
                    }
                }, 'json');
            }, function(){

            });
        }

        window.design = function (obj) {
            let designLayer = layer.open({
                type: 2,
                maxmin: true,
                title: obj.data['title'] + '-表单设计',
                shade: 0.1,
                area: screen(),
                content: MODULE_PATH + 'design/id/'+obj.data['id']
            });

            layer.full(designLayer);
        }

        window.refresh = function(param) {
            table.reload('dataTable');
        }

        form.on('switch(deploy-enable)', function (data) {
            if (this.checked) {
                $.post('/form/deploy', {fid: data.value}, function (res) {
                    if (res.code == 0) {
                        layer.msg(res.msg);
                        setTimeout(function () {
                            table.reload('dataTable');
                        }, 1000);
                    } else {
                        layer.msg(res.msg);
                    }
                }, 'json');
            } else {

                layer.confirm('取消部署后，数据库表将被删除，同时您的<br/>增强事件也会被删除，您还是决定要删除吗？', {
                    title: '友情提示',
                    icon: 3,
                    btn: ['确定', '取消']
                }, function(){
                    $.post('/form/unDeploy', {fid: data.value}, function (res) {
                        if (res.code == 0) {
                            layer.msg(res.msg);
                            setTimeout(function () {
                                table.reload('dataTable');
                            }, 1000);
                        } else {
                            layer.msg(res.msg);
                        }
                    }, 'json');
                }, function(){

                });
            }
        });
    })
</script>
</body>
</html>
